import React, {Component} from 'react';
import {
    StyleSheet,
    Text,
    View,
    Image,
    Dimensions,
    ListView,
    TouchableOpacity,
    TextInput
} from 'react-native';
import Picker from 'react-native-picker';
import area from '../../json/area.json'
const {height, width} = Dimensions.get('window');
export default class RegistrationPage extends Component {
    constructor(props) {
        super(props);
        this.state = {
            phone:'',
            area:'',
            isSelect:false,
            areaChange:''
        }
    };

    _createAreaData=()=> {
        let data = [];
        let len = area.length;
        for(let i=0;i<len;i++){
            let city = [];
            for(let j=0,cityLen=area[i]['city'].length;j<cityLen;j++){
                let _city = {};
                _city[area[i]['city'][j]['name']] = area[i]['city'][j]['area'];
                city.push(_city);
            }

            let _data = {};
            _data[area[i]['name']] = city;
            data.push(_data);
        }
        return data;
    };

    area=()=>{
        let b=[];
        b=this.state.area[2];
        for(let i=0;i<b.length;i++){
            if(b[i]!=='市'){
                this.setState({
                    areaChange:this.state.area[1]
                })
            }else {
                this.setState({
                    areaChange:this.state.area[2]
                })
            }
        }
    };

    _showAreaPicker=()=>{
        Picker.init({
            pickerConfirmBtnText:'完成',
            pickerCancelBtnText:'取消',
            pickerTitleText:'',
            pickerToolBarBg:[255,255,255,255],
            pickerBg:[222,222,222,222],
            pickerData: this._createAreaData(),
            selectedValue: ['河北', '唐山', '古冶区'],
            onPickerConfirm: pickedValue => {
                this.setState({
                    area:[pickedValue[0]+'省',pickedValue[1]+'市',pickedValue[2]],
                    isSelect:false
                },()=>this.area());
            },
            onPickerCancel: (pickedValue, pickedIndex) => {
                this.setState({
                    isSelect:false
                })
            },
        });
        Picker.show();
        this.setState({
            isSelect:true
        })
    };


    render() {
        return (
            <View style={styles.container}>
                {this.state.isSelect
                    ?(<TouchableOpacity
                        onPress={()=>this.setState({
                            isSelect:false
                        },()=>Picker.hide())}
                        style={{position: 'absolute',top:0, bottom:0,left:0,right:0,
                            backgroundColor:'#000000',opacity:0.2,zIndex:2}}/>)
                    :(null)}
                <TouchableOpacity
                    onPress={()=>Actions.pop()}
                    style={styles.goBackView}>
                    <Text style={styles.goBackMsg}>取消</Text>
                </TouchableOpacity>
                <View style={styles.topTitle}>
                    <Text style={styles.topTitleMsg}>请输入你的手机号</Text>
                </View>
                <View style={styles.phoneAndAreaView}>
                    <View style={styles.areaView}>
                        <Text style={styles.areaMsg}>地区／城市</Text>
                        <TouchableOpacity
                            style={styles.selectAreaView}
                            onPress={()=>this._showAreaPicker()}>
                            <Text style={styles.areaMsg}>{this.state.area}</Text>
                            <Image
                                source={ImageUtil.Guide}
                                style={styles.guideImg}/>
                        </TouchableOpacity>
                    </View>
                    <View style={styles.bottomTextInputView}>
                        <Text style={styles.TextInputTitleMsg}>+ 86</Text>
                        <TextInput
                            ref={ (ref)=>this.topTextInput = ref }
                            autoCapitalize={"none"}
                            defaultValue={this.state.phone}
                            placeholder="请输入手机号码"
                            keyboardType={"numeric"}
                            placeholderTextColor='#bababa'
                            autoCorrect={false}
                            style={styles.textInputView}
                            onChangeText={(text)=>{
                                this.setState({
                                    phone:text,
                                })
                            }}/>
                    </View>
                </View>
                <View style={styles.nextStepView}>
                    {this.state.phone!==''
                    ?(<TouchableOpacity
                            onPress={()=>this.goNextPage(this.state.area,this.state.areaChange,this.state.phone)}
                            style={[styles.nextStepButView,{backgroundColor:'#3090dd'}]}>
                            <Text style={styles.nextStepMsg}>下一步</Text>
                        </TouchableOpacity>)
                    :(<TouchableOpacity style={[styles.nextStepButView,{backgroundColor:'#69a9dd'}]}>
                            <Text style={styles.nextStepMsg}>下一步</Text>
                        </TouchableOpacity>)}
                </View>
            </View>
        );
    }
    goNextPage=(area,areaChange,phone)=>{
        if(this.state.phone.length!==11){
            alert('手机号长度不正确')
        }else if(this.state.phone[0]!=1){
            alert('请输入正确的手机号')
        }else {
            Actions.push('RegistrationNextPage',{area:area,areaChange:areaChange,phone:phone})
        }
    };
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#ffffff'
    },
    topTitle: {
        marginTop: 109,
        justifyContent: 'center',
        alignItems: 'center',
    },
    topTitleMsg: {
        fontSize: 20,
        color: '#000000'
    },
    phoneAndAreaView: {
        marginTop: 24,
        marginLeft: 30
    },
    areaView: {
        width: width - 60,
        flexDirection: 'row',
        alignItems: 'center',
        height: 40,
        borderColor: '#bababa',
        borderBottomWidth:1
    },
    areaMsg: {
        fontSize: 15,
        color: '#000000'
    },
    bottomTextInputView: {
        width: width - 60,
        flexDirection: 'row',
        alignItems: 'center',
        height: 40,
        borderColor: '#bababa',
        borderBottomWidth: 1
    },
    TextInputTitleMsg: {
        fontSize: 15,
        color: '#000000',
        marginLeft: 19
    },
    textInputView: {
        position: 'absolute',
        left: 105,
        height: 40,
        width: width - 165,
        fontSize: 15
    },
    nextStepView: {
        marginTop:39,
        justifyContent:'center',
        alignItems:'center'
    },
    nextStepButView:{
        width:width-60,
        alignItems:'center',
        justifyContent:'center',
        borderRadius:5,
        height:44
    },
    nextStepMsg:{
        color:'#ffffff',
        textAlign:'center',
        fontSize:17
    },
    goBackView:{
        position: 'absolute',
        left: 15,top:35
    },
    goBackMsg:{
        fontSize:16,
        color:'#3090dd',
        textAlign:'center'
    },
    selectAreaView:{
        position: 'absolute',
        left: 105,
        height: 40,
        width: width - 165,
        flexDirection:'row',
        alignItems:'center'
    },
    guideImg:{
        position: 'absolute',
        right:0
    }
});
